<!--
 * @Description: * 
 * @Date: 2021-01-01 21:33:49
 * @LastEditTime: 2021-03-28 16:24:42
 * @Author: Ji YingHao
 * @FilePath: /nuxt-app/pages/vip/index.vue
-->
<template>
  <div class="vip">
    <div class="vip_1">
      <div class="vip_1_1" v-for="(item,index) in list" :key="index">
        <Card style="width: 100%;">
          <p class="vip_1_1_1">{{ item.name }}</p>
          <p class="vip_1_1_2">
            <span>{{ item.price }}</span>
            <i> {{ item.price + 27*index }}元 </i>
          </p>
          <template v-for="(it,i) in list_">
            <p class="vip_1_1_3"  :key="i" v-if="index == i">
            <Badge status="success" :text="it.desc1" />
            <Badge status="error" :text="it.desc2" />
            <Badge status="default" :text="it.desc3" />
          </p>
          </template>
          <p class="vip_1_1_4">
            <Button
              class="button_1"
              type="error"
              shape="circle"
              icon="ios-bowtie"
              >{{ `立即开通` }}</Button>
          </p>
        </Card>
      </div>
    </div>
    <div class="vip_2">
        <p class="vip_title">开通VIP须知</p>
        <p v-for="(item,index) in descList" :key="index"> <Badge status="default" :text="item" /> </p>
    </div>
  </div>
</template>
<script>

/**
 * HPV
 */
import API from "@/api/index";
export default {
  name: "vip",
  components: {},
  data() {
    return {
        list:[],
        list_:[
            {
                title: "月度会员000",
                number1: "28",
                number2: "35",
                desc1: "有效期：31天",
                desc2: "可免费下载本站月度会员资源",
                desc3: "每天可下载3次",
                btn: "立即开通",
            },
            {
                title: "季度会员",
                number1: "128",
                number2: "235",
                desc1: "有效期：122天",
                desc2: "可免费下载本站月度会员资源",
                desc3: "每天可下载10次",
                btn: "立即开通",
            },
            {
                title: "年度会员",
                number1: "365",
                number2: "535",
                desc1: "有效期：31天",
                desc2: "可免费下载本站月度会员资源",
                desc3: "每天可下载20次",
                btn: "立即开通",
            },
            {
                title: "终身会员",
                number1: "550",
                number2: "1350",
                desc1: "有效期：永久",
                desc2: "可免费下载本站月度会员资源",
                desc3: "每天可下载30次",
                btn: "立即开通",
            }
        ],
        descList:[
            "不管你是什么等级会员，本站承若绝不封号；",
            "本站资源仅供学习参考，请勿商用；",
            "下载本站资源请在法律允许范围内使用，请勿用于非法用途，否则产生的一切后果自负；",
            "VIP会员您开通的是VIP资源下载权利，可下载本站源码，但不包含技术服务；",
            "我们不提供任何技术支持，不提供安装及调试方面的咨询服务。如遇到问题请‘百度’或QQ群咨询。介意者请勿开通；",
            "由于本站资源数量比较多，人力有限，无法做到一一测试，不排除部分源码存在BUG等问题，敬请谅解！"
        ]
    };
  },
  computed: {},
  mounted: function () {
    this.info();
  },
  methods: {
    info(){
      API.levelList().then((res) => {
        // this.total = res.data.total;
        // this.list.push( ...res.data.list );
        this.list = res.data.list;
        console.log('--------000----',res);
      });
    }
  },
};
</script>
<style lang="scss">
.vip {
  width: 100%;
  height: 100%;
//   background: #333;
  .vip_1 {
    display: flex;
    justify-content: space-evenly;
    padding-top: 50px;
    div {
      border-radius: 15px;
      width: 220px;
      height: 310px;
      text-align: center;
    }
    .vip_1_1 {
      .vip_1_1_1 {
        height: 40px;
        line-height: 40px;
        border-radius: 15px 15px 0 0;
        font-size: 25px;
      }
      .vip_1_1_2 {
        margin-top: 5px;
        color: #ed4014;
        // padding-left: 32px;
        text-align: center;
        span {
          font-size: 14px;
          display: inline-block;
          width: 100%;
          font-size: 40px;
        }
        i{
          display: inline-block;
          width: 100%;
            font-size: 14px;
            text-decoration:line-through; 
            color: #515a6e;
            
        }
      }
      .vip_1_1_3 {
          text-align: left;
          margin-top: 20px;
      }
      .vip_1_1_4 {
          margin-top: 30px;
          button{
              width: 180px;
          }
      }
    }
    .vip_1_2 {
    }
    .vip_1_3 {
    }
  }
  .vip_2{
      margin-top: 50px;
      margin-bottom: 50px;
      padding-left: 0%;
      .vip_title{
          font-size: 20px;
          padding-left: 16px;
          margin-bottom: 10px;
      }
      >p{
          margin-bottom: 4px;
      }
  }
}
</style>


